import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./app.css";

class App extends Component {
  state = {
    todos: [
      {
        id: "01",
        name: "学习",
        done: true
      },
      {
        id: "02",
        name: "跑步",
        done: false
      },
      {
        id: "03",
        name: "看电影",
        done: false
      }
    ]
  };
  addTodo = todo => {
    const { todos } = this.state;
    const newTodos = [todo, ...todos];
    this.setState({ todos: newTodos });
  };
  delTodo = id => {
    const { todos } = this.state;
    const newTodos = todos.filter(todo => todo.id !== id);
    this.setState({ todos: newTodos });
  };
  checkedTodo = (id, done) => {
    const { todos } = this.state;
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        todo.done = done;
      }
      return todo;
    });
    this.setState({ todos: newTodos });
  };
  checkedAll = done => {
    const { todos } = this.state;
    const newTodos = todos.map(todo => {
      return { ...todo, done };
    });
    this.setState({ todos: newTodos });
  };
  clearAllDone = () => {
    const { todos } = this.state;
    const newTodos = todos.filter(todo => !todo.done);
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="main">
        <Header addTodo={this.addTodo} />
        <List
          todos={todos}
          delTodo={this.delTodo}
          checkedTodo={this.checkedTodo}
        />
        <Footer
          todos={todos}
          checkedAll={this.checkedAll}
          clearAllDone={this.clearAllDone}
        />
      </div>
    );
  }
}

export default App;
